<script setup>
import router from '@/routers/router.js'
import Cookie from '@/utils/Cookie.js'

const props = defineProps({
  isHome: {
    type: Boolean,
    default: false
  }
})

// 登出
function logout() {
  Cookie.deleteCookie('token');
  router.push('/messageplus');
}

</script>
<template>
  <div class="title">
    <div class="tag-h"><img src="../assets/logo_max_white.png" alt="logo"></div>

    <div v-if="isHome" class="tag-btn" style="float: right"><button @click="logout">退出</button></div>
    <div class="tag-btn" style="float: right"><button onclick="window.open('https://www.red-coral.cn')">进入官网</button></div>
    <div class="tag" style="float: right">版本：0.2.2-beta</div>
  </div>
</template>
<style scoped>
.title {
  width: 100%;
  height: 70px;
  box-shadow: 0 0 1px 1px rgba(10,10,10, 0.1);
  border-bottom: 1px  solid rgba(220,220,220,1);
  background-color: rgba(255,255,255,0.8);
  backdrop-filter: blur(30px);
  transition: all 0.2s ease-out;
  overflow: hidden;
}
.title:hover {
  box-shadow: 0 0 10px 1px rgba(10,10,10, 0.1);
}

.tag-h {
  height: 100%;
  float: left;
  line-height: 70px;
}
.tag-h img {
  height: 100%;
}

.tag {
  height: 100%;
  float: left;
  line-height: 70px;
  padding: 0 15px;
}

.tag-btn {
  height: 100%;
  float: left;
  line-height: 70px;
  padding: 0 10px;
  background-color: rgba(0,0,0,0);
}
.tag-btn button {
  border: none;
  background-color: rgba(255,255,255,0);
  box-shadow: 0 0 0 1px rgba(10,10,10, 0.1);
  border-radius: 10px;
  height: 60%;
  min-width: 60px;
  transition: all 0.2s ease-out;
  padding: 0 10px;
}
.tag-btn button:hover {
  color: var(--parent-color);
  box-shadow: 0 0 5px 1px rgba(10,10,10, 0.2);
}
</style>